<style lang="less" scoped>
	.meauList {
		width: 100%;
		position: absolute;
		height: 84%;
		top: 49%;

		.mask {
			width: 100%;
			background-color: rgba(255, 255, 255, .9);
			border-top-right-radius: 7px;
			border-top-left-radius: 7px;
			padding-top: 10px;
			padding-bottom: 10px;

			.container {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				.play {
					width: 46%;
					height: 28px;
					display: flex;
					line-height: 30px;

					// justify-content: space-between;
					img {
						width: 18%;
						border-radius: 50%;
					}

					.all {
						margin-left: 10px;

						.num {
							margin-left: 7px;
							color: #505050;
							font-size: 12px;
						}
					}
				}

				.icon {
					width: 22%;
					height: 30px;
					line-height: 30px;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		.list{
			width: 100%;
			height:100%;
			overflow: hidden;
			.container{
				width: 92%;
				margin: 0 auto;
				.songLi{
					width: 100%;
					position: relative;
					padding-top: 10px;
					padding-bottom: 10px;
					.index{
						position: absolute;
						top:17px;
						left: -5px;
						text-align: center;
						width: 10%;
						color: #888;
						// background-color: red;
					}
					.song{
						margin-left: 40px;
						.row{
							display: flex;
							.vipTag{
								font-size: 10px;
								margin-top: 6px;
								height: 14px;
								line-height: 12px;
								padding: 0px 5px;
								padding-bottom: 2px;
								color:#eb4d44 ;
								border: 1px solid #f6c5c3;
								box-sizing: border-box;
								border-radius: 3px;
							}
							.tag{
								font-size: 10px;
								margin-top: 6px;
								height: 14px;
								line-height: 12px;
								padding: 0px 5px;
								padding-bottom: 2px;
								color:#dcb25c ;
								border: 1px solid #f4e3bd;
								box-sizing: border-box;
								border-radius: 3px;
								margin-left: 5px;
							}
							.author{
								margin-top: 5px;
								font-size: 12px;
								color: #aaa;
								margin-left: 6px;
							}
						}
					}
					
					.more{
						position: absolute;
						right: 0;
						top: 15px;
						transform: rotate(90deg);
					}
				}
				.bottom{
					margin-top: 15px;
					margin-bottom: 30px;
					width: 100%;
					text-align: center;
					color: #666;
				}
			}
		}
		.list::-webkit-scrollbar {
			display: none;
		}
	}
	.meauList::-webkit-scrollbar {
				display: none;
			}
</style>
<template>
	<view class="meauList">
		<div class="mask">
			<div class="container">
				<div class="loading" v-if="isLoading" style="position: absolute; top: 40%;left:30%;">
					<loading></loading>
				</div>
				<div class="play">
					<img src="../static/playAll.png" alt="" />
					<div class="all">
						<span>播放全部</span>
						<span class="num">({{musicList.length+1}})</span>
					</div>
				</div>
				<div class="icon">
					<div class="load">
						<uni-icons type="download" size="24"></uni-icons>
					</div>
					<div class="selectList">
						<uni-icons type="list" size="24"></uni-icons>
					</div>
				</div>
			</div>
		</div>
		<div class="list" @touchmove="getScrollY()">
			<div class="container">
				<ul>
					<li class="songLi" v-for="(item,index) in musicList" :key="index">
						<div class="index">
							{{index+1}}
						</div>
						<div class="song" @click="toMusic(item.id)">
							<div class="name">
								<span>{{item.name}}</span>
							</div>
							<div class="row">
								<div class="vipTag" v-if="item.fee=='VIP'">
									<span>{{item.fee}}</span>
								</div>
								<div class="tag">
									<span>超清母带</span>
								</div>
								<div class="author">
									<span>{{item.author}}</span>
								</div>
							</div>
						</div>
						<div class="more">
							<uni-icons type="more-filled" size="26" color="#cccccc" ></uni-icons>
						</div>
					</li>
				</ul>
				<p class="bottom">~到底了~</p>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getMeauSongs
	} from '../api/request';
	import loading from './loading.vue';
	export default {
		name: "meauList",
		components:{
				loading
		},
		props: {
			id: {
			type: Number,
			required: true
		},
			scrollY:{
				type: Number,
				required: true
			},
			collectList:{
				type: Array,
				required: true
			},
		},
		data() {
			return {
				musicList: [],
				listY:0,
				isLoading:false,
				
			};
		},
		async mounted() {
			if(this.id){
				await this.getMeauSongsFn(this.id)
			}else if(this.collectList){
				console.log(JSON.stringify(this.collectList))
				this.musicList=this.collectList
			}
			
		},
		methods: {
			async getMeauSongsFn(id) {
				this.isLoading=true
				await getMeauSongs({
						id
					})
					.then(
						(data) => {
							let {
								songs
							} = data
							// console.log("" + JSON.stringify(data))
							let newArr = songs.map(item => {
								let obj = {};
								obj.id = item.id;
								obj.name = item.name;
								if (item.ar.length > 1) {
									obj.author = item.ar.map((author, index) => {
										return index === 0 ? author.name : ' / ' + author.name;
									}).join('');
								} else {
									obj.author = item.ar[0].name;
								}
								if(item.fee=0){
									obj.fee=''
								}else if(item.fee=1){
									obj.fee='VIP'
								}else{
									obj.fee=''
								}
								return obj;
							})
							this.musicList = newArr
							// console.log("result:" + newArr)
						})
						setTimeout(()=>{
							this.isLoading=false
						},400)
			},
			toMusic(id){
				uni.navigateTo({
					url: "/pages/music/music?id=" + id
				})
				localStorage.setItem('SongList',JSON.stringify(this.musicList))
			},
			getScrollY(e){
				let ele=document.querySelector('.list')
				let y= ele.scrollTop
				this.listY=y
			},
			sendData(isScroll) {
			    this.$emit('dataSent', isScroll);
			}
		},
		watch:{
			scrollY(val){
				let ele=document.querySelector('.list')
				if(val>=265){
					ele.style.overflow='scroll'
				}else{
					ele.style.overflow='hidden'
				}
			},
			listY(val){
				if(val==0){
					this.sendData(true)
				}else{
					this.sendData(false)
				}
			}
		}
	}
</script>